<template>
  <div class="article-content-pane">
    <mat-content v-if="mode == ViewMode.Read" :content="content" :large="true"></mat-content>
    <phonetics-content v-if="mode == ViewMode.Phonetics" :content="content" @select="$emit('select', $event)"></phonetics-content>
  </div>
</template>

<script>
import MatContent from "../content/MatContent.vue";
import PhoneticsContent from "../content/PhoneticsContent.vue";
import {ViewMode} from "../../js/constants.js";

export default {
  props: ["mode", "content"],
  components: {
    MatContent,
    PhoneticsContent,
  },
  created() {
    console.log("mode: ", this.mode)
  },
  watch: {
    mode: function(n) {
      console.log("mode changed: ", n)
    }

  },
  data() {
    return {
      ViewMode: ViewMode
    };
  },
  methods: {
  }
};
</script>